<script>
import dateUtils from "../../../../utils/dateUtils";

export default {
  name: "chooseDailyCount",
  computed: {
    //预计完成日期
    finishDate() {
      const nowDate = new Date();
      return dateUtils.formatDate(
        new Date(nowDate.getTime() + this.finishDay * 86400000),
        "yyyy-MM-dd",
      );
    },
    //完成天数
    finishDay() {
      return Math.ceil(this.remainWordCount / this.currentSelectCount);
    },
    //当前选择的每天背单词数量
    currentSelectCount: {
      set(val) {
        this.currentCountIndex = [
          this.countList.findIndex((item) => item.value === val),
        ];
      },
      get() {
        const count = this.countList[this.currentCountIndex[0]].value;
        this.$emit("change", count);
        return count;
      },
    },
  },
  props: {
    remainWordCount: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      //当前选择的每日背单词数量picker组件option数组下标
      currentCountIndex: [1],
      //每日背单词的数量列表
      countList: (() => {
        const list = [];
        for (let i = 2; i <= 20; i++) {
          const value = i * 5;
          list.push({
            value,
            text: `${value} 个`,
          });
        }
        return list;
      })(),
    };
  },
  methods: {
    //数据回显
    echoData(val) {
      this.currentSelectCount = val;
    },
  },
  emits: ["change"],
};
</script>

<template>
  <view class="component">
    <view class="text-block">
      <!--			预计完成时间-->
      <view class="finish-time item"
        >预计完成日期：<text class="blue-text">{{ finishDate }}</text></view
      >
      <!--				完成天数-->
      <view class="finish-day item"
        >完成天数：<text class="blue-text">{{ finishDay }} 天</text></view
      >
    </view>
    <!--			选择每日背单词数量的滚轮组件-->
    <view class="count-list">
      <view class="title">每天背单词</view>
      <picker-view
        style="width: 100%; height: 300rpx"
        :value="currentCountIndex"
        @change="
          (val) => {
            currentCountIndex = val.detail.value;
          }
        "
      >
        <picker-view-column>
          <view
            v-for="item in countList"
            :key="item.value"
            style="text-align: center"
            >{{ item.text }}</view
          >
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
}
.text-block {
  margin-bottom: 30rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid var(--border-color);
  > .item {
    color: var(--text-color);
    font-size: 32rpx;
    margin-bottom: 20rpx;
    .blue-text {
      color: #007aff;
    }
  }
}
.count-list {
  > .title {
    font-size: 36rpx;
    color: var(--text-color);
    margin-bottom: 20rpx;
    text-align: center;
  }
}
.tips {
  color: darkred;
  font-size: 28rpx;
  margin-top: 50rpx;
}
</style>
